<script setup lang="ts">
import {ref} from "vue";
import {page} from '@/api/points'
import {onLoad} from "@dcloudio/uni-app";
const searchParam=ref({
  page:1,
  limit:10,
  operType:'0'
})
const list=ref([])
const total=ref(0)
const lower=(e)=>{
  console.log("底部",e)
  if (list.value.length < total.value){
    searchParam.value.page++;
    getList()
  }
}
onLoad(()=>{
  getList()
})
const getList=()=>{
  page(searchParam.value).then(res=>{
    if (searchParam.value.page > 1){
      list.value=list.value.concat(res.data.list)
    }else{
      list.value=res.data.list;
    }
    total.value=res.data.total;
  });
}
</script>

<template>
<view class="uni-container-exchangerecords">
  <scroll-view scroll-y="true" class="scroll-Y"  @scrolltolower="lower" >
    <view class="exchangerecords" v-for="(item,index) in list" :key="index" :index="index">
      <view class="exchangerecord-item">
        <text style="font-weight: bolder;color: #566B4C;">{{item.menuName}}</text>
        <text style="color: #675F54">数量：{{item.quantity}}</text>
      </view>
      <view  class="exchangerecord-item">
        <text>原价：{{item.oldPrice}} 元</text>
        <text>抵扣金额：{{item.deductionMoney}} 元</text>
        <text style="color: #B5A74F">使用积分：{{item.pointsNum}}</text>
      </view>
    </view>
  </scroll-view>
</view>
</template>

<style scoped lang="scss">
.exchangerecord-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15px;
  margin-right: 15px;
}
.scroll-Y {
  width: 100%;
  height:99%;
  margin-bottom: 10px;
}
.exchangerecords{
  margin-left: 18PX;
  width: 90%;
  background-color: whitesmoke;
  border-radius: 4px;
  height: 10%;
  color: gray;
  margin-bottom: 1px;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.uni-container-exchangerecords{
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 12px;
  width: 100%;
  height: 100%;
  display: flex; /* 使用flex布局可能有助于高度分配 */
  align-items: center;
  justify-content: center;
  background-color: #C9B9AA;
  position: fixed;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
}
</style>